<template>
  <div class="condition">
    <div class="line-column" />
    <div class="condition-content">{{ condition }}</div>
    <div class="line-column l-40" />
    <span class="el-icon-circle-plus" @click="addFlow" />
  </div>
</template>

<script>
export default {
  props: {
    condition: {
      type: String,
      default: 'aaa'
    }
  },
  methods: {
    addFlow() {
      this.$emit('addFlow')
    }
  }

}
</script>

<style scoped >
 .condition {
   display: flex;
   width: 80%;
   flex-direction: column;
   align-items: center;
 }
 .line-column {
   width: 0;
   height: 40px;
   border-left: 1px solid #000;
 }
 .condition-content {
   width: 100%;
   min-height: 60px;
   border: 1px solid blue;
   text-align: center;
   line-height: 60px;
   border-radius: 5px;
   background: crimson;
   color: #fff;
 }
 .l-40 {
   height: 40px;
 }
 .el-icon-circle-plus {
   font-size: 40px;
   margin-top: -1px;
   cursor: pointer;
 }
 .el-icon-circle-plus:hover {
   color:coral
 }
</style>
